<template>
    <van-cell>
      <van-image
        slot="icon"
        round
        width="30"
        height="30"
        style="margin-right: 10px;"
        :src="commentInfo.aut_photo"
      />
      <span style="color: #466b9d;" slot="title">{{commentInfo.aut_name}}</span>
      <div slot="label">
        <p style="color: #363636;">{{commentInfo.content}}</p>
        <p>
          <span style="margin-right: 10px;">{{commentInfo.pubdate | relativeTime }}</span>
          <van-button 
              size="mini" 
              type="default" 
              @click="$emit('click-reply',commentInfo)">
              回复{{commentInfo.reply_count}}
          </van-button>
        </p>
      </div>
      <van-icon 
      slot="right-icon" 
      :name="commentInfo.like_count > 0 ? 'good-job':'good-job-o'" 
      :color="commentInfo.like_count > 0 ? '#3296fa':'#777'" 
      @click="onCommentLike"
      >{{ commentInfo.like_count > 0 ? commentInfo.like_count : '赞'  }}</van-icon>
    </van-cell>
</template>

<script>
  import {addCommentLike,deleteCommentLike} from '@/api/comment'
  export default {
    props: {
      // 这一行的评论数据信息
      commentInfo: {
        type: Object,
        required:true 
      },
    },
    methods: {
      async onCommentLike(){
        // 判断行为
        try {
          let count = this.commentInfo.like_count
          if(this.commentInfo.is_liking){
            // 取消点赞
            await deleteCommentLike(this.commentInfo.com_id)
            this.$toast.success('取消成功')
          }else{
            // 要点赞
            await addCommentLike(this.commentInfo.com_id)
            this.$toast.success('点赞成功')
          }
          // 更新视图
          console.log(this.commentInfo)
          this.commentInfo.like_count = this.commentInfo.is_liking ? --count : ++count
          this.commentInfo.is_liking = !this.commentInfo.is_liking
        } catch (error) {
          this.$toast.fail('操作失败')
        }
      }
    },
  }
</script>

<style lang="less" scoped>

</style>